<template>
	<view class="create-detail">
		<view class="create-project-form">
			<view class="create-item">
				<text class="info-item-title">事项名称</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入项目名称" v-model="projectName">
			</view>

			<button class="create-btn" @click.stop.prevent="handleEditClass">确认修改</button>
		</view>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				projectName: '',
				oldProjectClassName: '',
			}
		},
		onLoad(option) {
			if (option) {
				this.projectName = option.className;
				this.oldProjectClassName = option.className;
			}
		},
		methods: {
			handleEditClass() {
				getApp().showLoading();
				let shopid = uni.getStorageSync("projectInfo").shopId;
				let rqs = {
					"shopId": shopid,
					"class": this.oldProjectClassName,
					"newClass": this.projectName
				};
				apiRqs._editProjectClass(rqs).then((res) => {
					uni.hideLoading();
					console.log('修改结果', res);
					if (res.code == 200) {
						getApp().showToast("修改成功", "success");
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.create-detail {
		.create-project-form {
			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				height: 48px;
				line-height: 48px;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 0 15px;
				box-sizing: border-box;

				&:first-child {
					border-top: 1px solid #f5f5f5;
				}

				.info-item-title {
					width: 80px;
					flex: 0 0 80px;
					font-size: 14px;
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}

			.create-btn {
				margin: 20px 15px;
				border: none;
				background-color: #008aff;
				color: #fff;
				font-size: 15px;
				height: 35pt;
				line-height: 35pt;

				&:active {
					background-color: #0076DB;
				}
			}
		}
	}
</style>
